<template>
	<view class="tabBarBox">
		<view class="tabBar">
			<view v-for="(item, index) in tabBar" :key="item.url" class="tabbar_item" :class="{ active: item.url == currentPage }" @click="navTo(item)">
				<image v-if="item.url == currentPage" :src="item.imgClick" mode=""></image>
				<image v-else :src="item.imgNormal" mode=""></image>
				<view class="text">{{ item.text }}</view>
				<view class="text">{{ item.text1 }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		currentPage: {
			type: String,
			default: 'home'
		}
	},
	data() {
		return {
			tabBar: [
				{
					url: 'tabBar1',
					text: '首页',
					text1: 'Home',
					pagePath: '/pages/home/home/index',
					imgNormal: '/static/home/home.png',
					imgClick: '/static/home/home1.png'
				},
				{
					url: 'tabBar2',
					text: '联系',
					text1: 'Contact',
					pagePath: '/pages/about/about/index',
					imgNormal: '/static/home/contact.png',
					imgClick: '/static/home/contact1.png'
				},
				{
					url: 'tabBar3',
					text: '装修',
					text1: 'Renovation',
					pagePath: '/pages/decoration/decoration/index',
					imgNormal: '/static/home/renovation.png',
					imgClick: '/static/home/renovation1.png'
				},
				{
					url: 'tabBar4',
					text: '简介',
					text1: 'Brief',
					pagePath: '/pages/Introduction/Introduction/index',
					imgNormal: '/static/home/brief.png',
					imgClick: '/static/home/brief1.png'
				},
				{
					url: 'tabBar5',
					text: '我的',
					text1: 'User',
					pagePath: '/pages/user/user/index',
					imgNormal: '/static/home/user.png',
					imgClick: '/static/home/user1.png'
				}
			]
		}
	},
	created() {
		uni.hideTabBar({})
	},
	computed: {},
	methods: {
		navTo(item) {
			if (item.url !== this.currentPage) {
				uni.switchTab({
					url: item.pagePath
				})
			} else {
				// this.$parent.toTop()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
//导航栏设置
$isRadius: 0rpx; //左上右上圆角
$isWidth: 100%; //导航栏宽度
$isBorder: 0px solid white; //边框 不需要则设为0px
$isBg: white; //背景

// 选中设置
$chooseTextColor: $uni-color-base; //选中时字体颜色
$chooseBgColor: transparent; //选中时背景颜色 transparent为透明

//未选中设置
$normalTextColor: #999; //未选中颜色

.tabBarBox {
	height: 160rpx;

	.tabBar {
		width: $isWidth;
		height: 160rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0rpx -2rpx 10rpx rgba(89, 125, 172, 0.4);
		margin: 0 auto;
		z-index: 998;
		background-color: $isBg;
		color: $normalTextColor;
		border-left: $isBorder;
		border-top: $isBorder;
		border-right: $isBorder;
		display: flex;
		justify-content: space-around;
		border-top-right-radius: $isRadius;
		border-top-left-radius: $isRadius;
		box-sizing: border-box;
		overflow: hidden;

		.tabbar_item {
			width: 25%;
			font-size: 12px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&.active {
				border-left: $isBorder;
				border-top: $isBorder;
				background: $chooseBgColor;
				color: $chooseTextColor;
			}
		}

		image {
			width: 48rpx;
			height: 48rpx;
			margin-left: 5rpx;
		}
	}
}
</style>
